<template>
  <div>
    <!-- 上一半 -->
    <div>
      <el-row :gutter="20">
        <el-col :span="12">
          <div class="module">
            <el-descriptions direction="vertical" :column="4" border>
              <el-descriptions-item label="用户名">{{
                userInfo.userName
                }}</el-descriptions-item>
              <el-descriptions-item label="手机号">{{
                userInfo.phone
                }}</el-descriptions-item>
              <el-descriptions-item label="邮箱">{{
                userInfo.email
                }}</el-descriptions-item>
              <el-descriptions-item label="性别" :span="2">{{
                userInfo.gender
                }}</el-descriptions-item>
            </el-descriptions>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="module">
            <ECharts class="chart" :option="storageData"></ECharts>
          </div>
        </el-col>
      </el-row>
    </div>
    <!-- 下一半 -->
    <div>
      <el-row :gutter="20">
        <el-col :span="12">
          <div class="module">
            <ECharts class="chart" :option="uploadData"></ECharts>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="module">
            <ECharts class="chart" :option="downData"></ECharts>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
  import link from "@/api/Link.js";
  import apiUrl from "@/api/url";
  import sizeTostr from '@/util/FileSizeUtil'
  export default {
    name: "home",
    data () {
      return {
        //存储详情
        storageData: {
          title: {
            text: "存储详情",
            left: "center",
          },
          label: {
            show: true,
            formatter (param) {
              // correct the percentage
              return param.name + ' (' + param.percent + '%)';
            }
          },
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
          },
          legend: {
            // orient: "vertical",
            top: 'bottom'
          },
          series: [
            {
              name: "空间",
              type: "pie",
              radius: "65%",
              data: [
                { value: 0, name: "剩余空间" },
                { value: 0, name: "文档" },
                { value: 0, name: "图片" },
                { value: 0, name: "视频" },
                { value: 0, name: "其他" },
              ],
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: "rgba(0, 0, 0, 0.5)",
                },
              },
            },
          ],
        },

        uploadData: {
          title: {
            text: "最近上传",
            left: "center",
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              data: [820, 932, 901, 934, 1290, 1330, 1320],
              type: 'line',
              areaStyle: {}
            }
          ]
        },

        downData: {
          title: {
            text: "待扩展表格",
            left: "center",
          },
          xAxis: {
            type: "category",
            data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
          },
          yAxis: {
            type: "value",
          },
          series: [
            {
              data: [0, 0, 0, 0, 0, 0, 0],
              type: "line",
            },
          ],
        },

        userInfo: {
          userName: "",
          phone: "",
          gender: "",
          email: '',
        },
      };
    },
    computed: {},
    methods: {},
    mounted () {
      //基本信息数据获取
      let userInfo = localStorage.getItem("user");
      let user = JSON.parse(userInfo, this.userInfo);
      this.userInfo.userName = user.userName;
      this.userInfo.phone = user.phone;
      this.userInfo.gender = user.gender == 0 ? '男' : '女';
      this.userInfo.email = user.email
      //扇形数据获取
      link(apiUrl.baseUrl + "/sys/storage/getInfo/v1", "POST").then((ok) => {
        if (ok.data.code === 0) {
          this.storageData.series[0].data[0].value = ok.data.data.residueSize;
          this.storageData.series[0].data[1].value = ok.data.data.documentSize;
          this.storageData.series[0].data[2].value = ok.data.data.imageSize;
          this.storageData.series[0].data[3].value = ok.data.data.videoSize;
          this.storageData.series[0].data[4].value = ok.data.data.ortherSize;
        }
      }
      );
      //获取用户上传数据
      link(apiUrl.baseUrl + '/sys/user/getUploadInfo/v1', 'POST').then(ok => {
        if (ok.data.code == 0) {
          for (let i = 0; i < ok.data.data.length; i++) {
            this.uploadData.xAxis.data[i] = ok.data.data[i].date.substring(5)
            this.uploadData.series[0].data[i] = ok.data.data[i].count
          }
          this.uploadData = JSON.parse(JSON.stringify(this.uploadData))
        }
      })
      //获取用户下载数据


    },
  };
</script>

<style scoped>
  .chart {
    height: 100%;
    width: 100%;
  }

  .module {
    background-color: rgb(249, 237, 237);
    height: 270px;
    margin: 10px 0px;
    text-align: center;
    border-radius: 20px;
    border: 1px solid rgb(53, 52, 52);
    padding: 10px;
    /* box-shadow: 5px 5px 5px 5px rgba(133, 133, 132, 0.5) */
  }
</style>